<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Link & Go</title>
    <link href="./css/common.css" rel="stylesheet">
    <link href="./css/game.css" rel="stylesheet">
    <link href="./css/record.css" rel="stylesheet">
</head>
<body>
<div id="game_page">
    <div class="top-bar">
        <div class="">Current Level : <span id="level_view">Easy</span></div>
        <div class="">Timer : <span id="timer">100</span></div>
        <div class="">Current Mode :  <span id="mode_view">Build Mode</span></div>
    </div>
    <canvas width="1440px" height="720px" id="canvas"></canvas>
    <div class="tool-bar">
        <div class="item" id="road_paver"><img src="./images/road_paver.png"></div>
        <div class="item" id="rebirth_gate"><img src="./images/rebirth_gate.png"></div>
        <div class="item" id="navigator"><img src="./images/navigator.png"></div>
        <div class="item" id="remove"><img src="./images/remove.png"></div>

        <div class="ws">
            <span>Wallet : <span id="wallet_view">3000</span></span>
            <span>Score : <span id="score_view">3000</span></span>
        </div>
        <a href="./13_Welcome_Page.html" class="btn btn-sm">Main Page</a>
        <button class="btn btn-sm">Load Game</button>
        <button class="btn btn-sm">Save Game</button>

        <div id="launch_btn">Launch</div>
        <div id="build_btn">Build</div>
    </div>
</div>
<div id="game_over_page">
    <div id="game_status_win_view">You Wind</div>
    <div id="game_status_loss_view">You Loss</div>
    <table class="game_info">
        <tr><td>Wallet : </td><td><span id="game_info_wallet_view"></span></td></tr>
        <tr><td>Score : </td><td><span id="game_info_score_view"></span></td></tr>
    </table>
    <div class="btn-area">
        <button id="end_game_btn" class="btn">End Game</button>
        <button id="play_again_btn" class="btn">Play Again</button>
        <button id="next_level_btn" class="btn">Next Level</button>
    </div>
</div>
<div class="modal-box" id="record_modal">
    <div class="title">Records</div>
    <div class="item" id="record_list_item_template">
        <div>
            <span>Nickname : <span class="nickname">World Skills</span></span>
        </div>
        <div>
            <span>Level : <span class="level">easy</span></span>
            <span>Wallet : <span class="wallet">2020</span></span>
            <span>Score : <span class="wallet">0</span></span>
        </div>
        <div>
            <span>Save At : <span class="submit_at">2021-12-2 19:20</span></span>
        </div>
    </div>
    <div class="body list">
        <div class="not-have-data">Not have data yet~</div>
        <div class="item">
            <div>
                <span>Nickname : <span class="nickname">World Skills</span></span>
            </div>
            <div>
                <span>Level : <span class="level">easy</span></span>
                <span>Wallet : <span class="wallet">2020</span></span>
                <span>Score : <span class="wallet">0</span></span>
            </div>
            <div>
                <span>Save At : <span class="submit_at">2021-12-2 19:20</span></span>
            </div>
        </div>
    </div>
</div>


    <script src="js/element.js"></script>
    <script src="js/utils.js"></script>
    <script src="js/game.js"></script>
    <script src="js/record.js"></script>
</body>
</html>